<template>
  <div class="wrapper">
    <div class="tab">
    <router-link :to="{ path: '/result/recommend', query: { name: `${searchParams.name}`, sort: 'sort'}}"
                   class="item"
                   tag="div">推荐排序</router-link>
      <router-link :to="{ path: '/result/distance', query: { name: `${searchParams.name}`, sort: 'distance'}}"
                   class="item"
                   tag="div">距离最近</router-link>
      <router-link :to="{ path:'/result/popularity', query: { name: `${searchParams.name}`, sort: 'looks'}}"
                   class="item"
                   tag="div">人气优选</router-link>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ResultTab',
  computed: {
    ...mapState(['searchParams'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.tab
  width 100%
  height 80px
  background-color $bgcOne
  display flex
  padding()
  justify-content space-between

  .item
    font-size $fzThird
    color rgba(255, 255, 255, 0.4)
    flex 1
    line-height 80px
    text-align center

  .router-link-active
    box-sizing border-box
    color $whiteFzClor
    border-bottom 4px solid $bgcWh
</style>
